<template>
  <div class="tool-import container">
    <div class="handle-box">
      <span>设备编号/生产批次：</span>
      <el-input
        v-model="query.condition"
        placeholder="设备编号/生产批次"
        class="handle-input mr10"
      ></el-input>
      <el-button type="default" @click="reset">重置</el-button>
      <el-button type="primary" @click="getData">搜索</el-button>

      <el-upload
        style="display: inline-block; float: right"
        :action="`${baseURl}/import/importDeviceCalibration`"
        :on-success="handleSuccess"
        :on-error="handleError"
      >
        <el-button type="primary">导入文件</el-button>
      </el-upload>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      class="table"
      ref="multipleTable"
      header-cell-class-name="table-header"
    >
      <el-table-column width="100" align="center" label="序号" fixed>
        <template v-slot="scope">
          {{ indexMethod(scope.$index, query.page, query.pageSize) }}
        </template>
      </el-table-column>
      <template v-for="item in columns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          v-if="item.prop === 'deviceStatus'"
        >
          <template v-slot="scope">
            {{ ["在线", "离线"][scope.row[item.prop]] }}
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
      </template>
      <!-- 
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="primary" plain @click="showModal(scope.row)">
              查看历史数据
            </el-button>
          </template>
        </el-table-column> -->
    </el-table>

    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      @current-change="query.change"
      :total="query.total"
    >
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { baseURl } from "@/api"
import { ElMessage } from "element-plus"
import { ref, reactive } from "vue"
import { indexMethod } from "@/utils/tools"
import { getDeviceCalibrationList } from "@/api"

useTableHight()
const query = reactive({
  total: 0,
  page: 1,
  pageSize: 10,
  condition: "",
  change: (page) => {
    query.page = page
    getData()
  }
})

const tableData = ref([])
const columns = ref([
  { prop: "deviceNo", label: "设备编号" },
  { prop: "deviceBarCode", label: "设备条形码编号" },
  { prop: "deviceModel", label: "设备型号" },
  { prop: "deviceRange", label: "量程" },
  { prop: "belongingPlace", label: "归属地市区" },
  { prop: "simCode", label: "SIM卡号" },
  { prop: "produceBatch", label: "生产批次" }
])

const handleSuccess = (e) => {
  if (e.code === 200) {
    ElMessage.success("导入成功")
    getData()
  } else {
    ElMessage.error("导入失败")
  }
}
const handleError = () => {
  ElMessage.error("导入失败")
}
const beforeUpload = () => {}

const loading = ref(true)
const getData = async () => {
  loading.value = true
  const res = await getDeviceCalibrationList({
    pageNumber: query.page,
    pageSize: query.pageSize,
    condition: query.condition
  })
  loading.value = false
  query.total = res?.total
  tableData.value = res?.rows
}
const reset = () => {
  query.condition = ""
  query.page = 1
  getData()
}
onMounted(getData)
</script>
<style lang="less" scoped>
:deep(.el-upload--text) {
  width: auto;
  height: 34px;
  border: 0px dashed #d9d9d9;
  text-align: left;
}
</style>
